import { useEffect, useState } from 'react'
import { useNavigate, useLocation } from 'react-router-dom'
import { Menu, Button } from 'tdesign-react'
import {
  ViewListIcon, AppIcon, SystemCoordinateIcon, CooperateIcon, GestureUp2Icon,
  BugIcon, BookOpenIcon, ChartLineData1Icon, LayersIcon
} from 'tdesign-icons-react'
import './index.less'

const SideBar = (props: any) => {

  const navigate = useNavigate()
  const location = useLocation()

  const [activeTab, setActiveTab] = useState('home')
  const [collapsed, setCollapsed] = useState(false)

  useEffect(() => {
    if (activeTab !== location.pathname.split('/')[1]) {
      navigate(`/${activeTab}`)
    }
  }, [activeTab])

  useEffect(() => {
    let path = location.pathname.split('/')[1]
    setActiveTab(path)
  }, [location])

  const renderLogo = () => {
    return <div className="custom-logo main-logo"></div>
  }

  const renderTitle = (title: string) => {
    if (!collapsed) {
      return title
    } else {
      return <div className='side-bar-title'>{title}</div>
    }
  }

  return <div className={'side-bar'}>
    <Menu
      value={activeTab}
      collapsed={collapsed}
      expandMutex={false}
      width={[160, 64]}
      onChange={(value: any) => { setActiveTab(value) }}
      operations={
        <Button variant='text' shape='square' icon={<ViewListIcon />} onClick={() => setCollapsed(!collapsed)} />
      }
      logo={renderLogo()}
    >
      <Menu.MenuItem value='home' icon={<AppIcon />}>{renderTitle('首页')}</Menu.MenuItem>
      <Menu.MenuItem value='product' icon={<SystemCoordinateIcon />}>{renderTitle('产品')}</Menu.MenuItem>
      <Menu.MenuItem value='enterprise' icon={<CooperateIcon />}>{renderTitle('项目')}</Menu.MenuItem>
      <Menu.MenuItem value='performance' icon={<GestureUp2Icon />}>{renderTitle('执行')}</Menu.MenuItem>
      <Menu.MenuItem value='test' icon={<BugIcon />}>{renderTitle('测试')}</Menu.MenuItem>
      <Menu.MenuItem value='devops' icon={<AppIcon />}>{renderTitle('DevOps')}</Menu.MenuItem>
      <Menu.MenuItem value='documents' icon={<BookOpenIcon />}>{renderTitle('文档')}</Menu.MenuItem>
      <Menu.MenuItem value='statistic' icon={<ChartLineData1Icon />}>{renderTitle('统计')}</Menu.MenuItem>
      <Menu.MenuItem value='organization' icon={<LayersIcon />}>{renderTitle('组织')}</Menu.MenuItem>
    </Menu>
  </div>
}

export default SideBar
